<template>
  <view class="codes">
    <view class="navs">
      <navigator
        url="/packageA/order/index"
        open-type="navigate"
        hover-class="none"
      >
        <u-icon name="arrow-leftward"></u-icon>
      </navigator>
      <view class="sear"> 待使用券码 </view>
      <navigator
        url="/pages/cart/index"
        open-type="switchTab"
        hover-class="none"
      >
        <u-icon name="/static/fenx.jpg"></u-icon>
      </navigator>
    </view>
    <view class="uv-code">
      <view class="tle">使用该券码</view>
      <view class="ewm">
        <uv-qrcode
          ref="qrcode"
          canvas-id="qrcode"
          :value="value"
          size="300rpx"
          :loading="loading"
          :options="options"
        ></uv-qrcode>
      </view>
      <view class="hm">123456789012345678</view>
      <view class="xr">新农人农庄 两大一小亲子票</view>
    </view>
  </view>
</template>

<script>
// import uvQrcode from "@/uni_modules/uv-qrcode/components/uv-qrcode/uv-qrcode.vue";
export default {
  name: "codes",
  components: {},
  data: () => ({
    options: {
      useDynamicSize: false,
      errorCorrectLevel: "Q",
      margin: 10,
      areaColor: "#fff",
      // 指定二维码前景，一般可在中间放logo
      //   foregroundImageSrc: require("static/image/logo.png"),
    },
    value: "https://www.baidu.com",
    loading: false,
  }),
  computed: {},
  watch: {},
  // 生命周期 - 创建完成（可以访问当前this实例）
  onLoad(options) {},
  // 生命周期 - 页面展示（不可以访问DOM元素）
  onShow() {},
  // 生命周期 - 挂载完成（可以访问DOM元素）
  onReady() {},
  // 方法集合
  methods: {},
};
</script>

<style lang='scss' scoped>
* {
  margin: 0;
  padding: 0;
  list-style: none;
  text-decoration: none;
}

.codes {
  font-family: "Poppins";
  background-color: #f9f9f9;
  position: absolute;
  width: 100%;
  height: 100%;
  .navs {
    padding-top: 120rpx;
    margin: 20rpx;
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  .uv-code {
    background: #fff;
    width: 95%;
    margin: 0 auto;
    padding-top: 10rpx;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    .tle {
      margin: 30rpx 0;
    }
    .hm {
      width: 90%;
      text-align: center;
      padding: 20rpx;
      border-top: 1px solid #d8d8d8;
      border-bottom: 1px solid #d8d8d8;
    }
    .xr {
      padding: 20rpx;
    }
  }
}
</style>